<script setup lang="ts">
import axios from 'axios';
import { reactive, ref } from 'vue'

// 响应式绑定用户数据
const userLoginInfo = reactive({
  username: '',
  password: '',
})

// 登录
const login = () => {
  // axios 传数据
  axios.post('/api/user/login', userLoginInfo).then(res => {
    console.log(res);
    if(res.data.code == 200) {
      sessionStorage.username = userLoginInfo.username;
      location.href = '/RentRecord';
    }else {
      alert('密码错误')
    }
  })
}

</script>

<template>
  <van-form>
    <van-cell-group inset>
      <van-field v-model="userLoginInfo.username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="userLoginInfo.password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
    </van-cell-group>
    <div
      style="margin: 16px; display: flex; justify-content: space-around; background: white; border-radius: 22px; background: rgba(171, 163, 163, 0.5);">
      <van-button round type="primary" @click="login">
        登录
      </van-button>
    </div>
  </van-form>
</template>

<style scoped>
.van-form {
  width: 100%;
  margin-top: 15rem;
  position: absolute;
}

.van-button {
  width: 100%;
}
</style>
